<template>
	<view class="bodys">
		<!-- #ifdef MP-WEIXIN || H5 -->
		<uNavbar title="店铺详情" bgColor="transparent" :titleStyle="titleStyle"> </uNavbar>
		<!-- #endif -->

		<view class="shop">
			<image class="shopbg" :src="baseUrl + '/static/image/rating3.png'" mode="aspectFill"></image>
			<image class="shopbg2" :src="baseUrl + '/static/image/rating4.png'" mode="aspectFill"></image>
			<view class="shop_box ">
				<view class="shop_box_2 flex_dq">
					<image class="shop_logo" :src="shopInfo.logo" mode="aspectFill"></image>
					<view class="shop_detail  flex_Z">
						<text class="f36 c0 overflow1 ">{{shopInfo.name}}</text>
						<view class="shop_xq flex_dq">
							<text class="f26 shop_c">粉丝 {{shopInfo.attach_total}}</text>
							<text class="f26 shop_c">收藏 {{shopInfo.collect_count}}</text>
							<text class="f26 shop_c">销量 {{shopInfo.sales_volume}}</text>
						</view>
					</view>
					<image class="crown" :src="grade.image" mode="aspectFill"></image>
				</view>
				<view class="shop_box_3 flex_dq">
					<image class="level_img1" :src="levelimg" mode="widthFix"></image>
					<view class="flex_dq" v-for="(item,index) in levelList" :key="index">
						<image class="level_img2" :src="item" mode="aspectFill"></image>
					</view>
				</view>
				<view class="shop_box_4 flex_Z">
					<text class="f28 c0">店铺简介</text>
					<view class="introduction">
						<text class="intro-text"  :class="showExpandBtn?'overflow2':''">{{shopInfo.introduction}}</text>
						<view class="expand" v-if="showExpandBtn" @click="expandShow = true">
							<text v-if="!expandShow">展开</text>
							<text v-else >收起</text>
						</view>
					</view>
				</view>
				<view class="interest opacity flex_c" v-if="collect" @click="clickCancel">
					<text>已收藏</text>
				</view>
				<view class="interest   flex_c" v-else @click="cliclCancel">
					<text>收藏</text>
				</view>
			</view>
		</view>

		<view class="mask"></view>

		<view class="score">
			<view class="" style="padding:  24rpx 24rpx 10rpx 24rpx;">
				<image class="scorebg" :src="baseUrl + '/static/image/dpkb.png'" mode="aspectFill"></image>
			</view>

			<view class="score_box flex_dq">
				<text class="numbers">{{evaluateRate}}</text>
				<u-rate readonly size="28" v-model="evaluateRate" allowHalf active-color="#FAD9AC"
					inactiveColor="#4c463b"></u-rate>
			</view>
			<view class="overall flex_Z">
				<view class="overall_box flex_dq">
					<text class="f26 shop_c">商品体验</text>
					<view class="progress ">
						<u-line-progress :percentage="Number(scoreDetails.goods_score) *20" :showText="false"
							activeColor="#FAD9AC" inactiveColor="#4C463B"></u-line-progress>
					</view>
					<text class=" fenshu">{{scoreDetails.goods_score}}</text>
				</view>
				<view class="overall_box flex_dq">
					<text class="f26 shop_c">服务体验</text>
					<view class="progress ">
						<u-line-progress :percentage="Number(scoreDetails.service_score) *20" :showText="false"
							activeColor="#FAD9AC" inactiveColor="#4C463B"></u-line-progress>
					</view>
					<text class=" fenshu">{{scoreDetails.service_score}}</text>
				</view>
				<view class="overall_box flex_dq">
					<text class="f26 shop_c">物流体验</text>
					<view class="progress ">
						<u-line-progress :percentage="Number(scoreDetails.logistics_score) *20" :showText="false"
							activeColor="#FAD9AC" inactiveColor="#4C463B"></u-line-progress>
					</view>
					<text class=" fenshu">{{scoreDetails.logistics_score}}</text>
				</view>
			</view>
		</view>

		<view class="score mt30">
			<view class="" style="padding:  24rpx 24rpx 10rpx 24rpx;">
				<image class="scorebg" :src="baseUrl + '/static/image/shop_jcxx.png'" mode="aspectFill"></image>
			</view>
			<view class="foundation_box flex_Z">
				<view class="foundation flex_ld">
					<text class="f30 shop_c">保障金</text>
					<text class="f30 c0"v-if="scoreDetails.earnest_money_total != 0.00">已缴纳</text>
					<text class="f30 c9" v-else>未缴纳</text>
				</view>
				<view class="foundation flex_ld" v-if="scoreDetails.is_show_business_license == 1">
					<text class="f30 shop_c">资质证照</text>
					<view class=" flex_dq" @click="goApplyTwo">
						<text class="f30 c0">查看</text>
						<u-icon name="arrow-right" color="#ffffff" size="16"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<u-popup :show="expandShow" mode="bottom" @close="expandShow=false" :safeAreaInsetBottom="false" round="10" >
			<view class="introduction_more flex_ZC">
				<text class="dpjj">店铺简介</text>
				<view class="more_detail">
					<text class="overflow2">{{shopInfo.introduction}}</text>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		shopDetail,
		shopCollect,
		cancelCollect
	} from "../../api/settled.js"
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				collect: false, //收藏
				expandShow: false, //简介
				showExpandBtn:false,
				evaluateRate: '',
				seller_id: '',
				levelimg: '',
				levelList: [],
				shopInfo: {},
				grade: {},
				scoreDetails: {},
				titleStyle: {
					color: '#ffffff'
				}
			}
		},
		 mounted() {
		    this.$nextTick(() => {
		      this.checkTextOverflow();
		    });
		  },
		onLoad(e) {
			if (e.id) {
				this.seller_id = e.id
			}
		},
		onShow() {
			this.getDetails()
			// #ifdef MP-ALIPAY
			my.setNavigationBar({
				title: '店铺详情',
				frontColor: '#ffffff',
				backgroundColor: '#ffffff'
			})
			// #endif
		},
		methods: {
			 checkTextOverflow() {
			      // 在uniapp中获取文本高度需要使用节点查询
			      const query = uni.createSelectorQuery().in(this);
			      query.select('.intro-text').boundingClientRect(data => {
					  console.log('----',data.height);
			        // 如果文本高度超过两行高度（假设每行高度约20px），则显示展开按钮
			        this.showExpandBtn = data && data.height > 40; // 40px约两行高度
					console.log(this.showExpandBtn);
			      }).exec();
			    },
			getDetails() {
				console.log(this.seller_id);
				const data = {
					seller_id: this.seller_id
				}
				shopDetail(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.shopInfo = res.data
						this.collect = res.data.be_collect
						this.scoreDetails = res.data.attach
						this.evaluateRate = res.data.evaluate_rate
						this.grade = res.data.attach.seller_level

						this.levelimg = res.data.attach.seller_level.name_image
						this.levelList = res.data.attach.seller_level.level_data.image_data
						// console.log(Number(0.5)*20);
						// console.log(Number(0.5) /5 *100);
					}

				})
			},
			cliclCancel() {
				const data = {
					id: this.seller_id,
					scene_type: 2
				}
				shopCollect(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.$u.toast('店铺已收藏')
						this.getDetails()
					}
				})
			},
			clickCancel() {
				const data = {
					id: this.seller_id,
					scene_type: 2
				}
				cancelCollect(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.$u.toast('已取消收藏')
						this.getDetails()
					}
				})
			},
			goApplyTwo() {
				uni.navigateTo({
					url: '/pagesMy/groundCat/merchantDetails?id=' + this.seller_id + '&type=1'
				})
			},
		},
	}
</script>

<style scoped>
	.bodys {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100vw;
		height: 100vh;
		background: #171413;
	}

	.shop {
		width: 750rpx;
		/* height: 600rpx; */
	}

	.shopbg {
		position: absolute;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 486rpx;
	}

	.shopbg2 {
		position: absolute;
		top: 200rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 686rpx;
		height: 418rpx;
	}

	.shop_box {
		position: absolute;
		top: 200rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 686rpx;
		height: 418rpx;
	}

	.shop_box_2 {
		position: relative;
		/* background: pink; */
		padding: 36rpx 34rpx 0;
	}

	.shop_box_3 {
		padding: 10rpx 34rpx 16rpx;
	}

	.shop_box_4 {
		padding: 0 34rpx;
	}

	.introduction {
		position: relative;
		width: 100%;
		height: 70rpx;
		font-size: 24rpx;
		color: #ffffff;
		opacity: 0.7;
	}

	.expand {
		position: absolute;
		bottom: -2rpx;
		right: 0;
		width: 100rpx;
		/* background:#24211c; */
		display: flex;
		justify-content: flex-end;
	}

	.expand>text {
		width: 60rpx;
		background: #24211c;
		font-size: 24rpx;
		color: #FFC300;
	}

	.shop_logo {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		margin-right: 22rpx;
	}

	.shop_detail {
		width: 400rpx;
		/* color: #ffffff; */
	}
	.shop_xq>text{
		margin-right: 10rpx;
	}

	.level_img1 {
		width: 116rpx;
		height: 38rpx;
		margin-right: 14rpx;
	}

	.level_img2 {
		width: 30rpx;
		height: 30rpx;
		margin-right: 4rpx;
	}


	.shop_c {
		color: #cccccc;
	}

	.crown {
		position: absolute;
		top: 10rpx;
		right: 24rpx;
		width: 108rpx;
		height: 108rpx;
	}

	.interest {
		width: 620rpx;
		height: 68rpx;
		background: linear-gradient(90deg, #FDF2CB 0%, #FDF2CB 34%, #F3A46B 100%);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin: 24rpx auto 0;
		font-weight: 500;
		color: #522F00;
	}

	.opacity {
		opacity: 0.5;
	}

	.mask {
		width: 686rpx;
		/* #ifdef H5 || MP-WEIXIN */
		height: 560rpx;
		/* #endif */
		/* #ifdef MP-ALIPAY */
		height: 640rpx;
		/* #endif */
		margin: 0 auto;
	}

	.score {
		width: 686rpx;
		/* height: 408rpx; */
		background: #24211c;
		margin: 0 auto;
		border: 1rpx solid #747474;
		border-radius: 30rpx 0 30rpx 0;
	}

	.scorebg {
		width: 136rpx;
		height: 34rpx;

	}

	.score_box {
		padding: 0 24rpx;
	}

	.numbers {
		font-size: 50rpx;
		color: #FAD9AC;
		font-weight: 600;
		margin-right: 10rpx;
	}

	.overall {
		width: 686rpx;
		padding: 0 24rpx 50rpx;
		margin: 0 auto;
	}

	.overall_box {
		margin-top: 36rpx;
	}

	.progress {
		flex: 1;
		margin: 0 24rpx;
	}

	.fenshu {
		font-size: 30rpx;
		color: #FAD9AC;
	}

	.mt30 {
		margin-top: 30rpx;
	}

	.foundation {
		margin: 40rpx 32rpx 0 24rpx;
	}

	.foundation_box {
		padding-bottom: 20rpx;
	}
	.introduction_more{
		width: 750rpx;
	}
	.dpjj{
		font-size: 36rpx;
		color: #333333;
		font-weight: 700;
		margin: 30rpx 0;
	}
	.more_detail{
		width: 750rpx;
		padding:0 30rpx 100rpx;
		font-size: 28rpx;
		color: #666666;
	}
</style>